/*-----------------
@AVATAR
基于JQ的tab切换插件
当元素应用此函数时
应用方法如下
<div class='tab'>
   <btns>
		 <btn>
		 <btn>
		 <btn>
   </btns>
   <contents>
         <content>
		 <content>
		 <content>
   </contents>
</div>
$('.tab').tab();
-----------------*/
(function($) {
    //插件主要内容
    $.fn.tab = function(options) {
        // 处理默认参数
        var opts = $.extend({}, $.fn.tab.defaults, options);
        return this.each(function() {
            var $this=$(this);
            var $content=$this.children();
            var $btns=$content.eq(0).children();//获取目标元素第一个子元素  标题按钮组 
            var $shows=$content.eq(1).children();//获取目标元素第二个子元素     内容组
                $btns.eq(0).addClass(opts.currentClass);//初始化 第一个选择按钮current类
                $shows.eq(0).siblings().hide();//初始化 显示第一个内容组 隐藏其他内容组
                $btns.bind(opts.eventType,function(){
                    var $that=$(this),
                        _index=$btns.index($that);
                       $that.addClass(opts.currentClass).siblings().removeClass(opts.currentClass);
                       $shows.eq(_index).show().siblings().hide();
                })
        });
    };
    //插件主要内容结束
    // 插件的defaults
    $.fn.tab.defaults = {
        currentClass:'current',//当前样式,默认current
        eventType:'click'//绑定事件类型,默认click (click,mouseenter)
    };
// 闭包结束
})(jQuery);